<template>
  <div class="product-page">
    <PageContainer title="积分商城">
      <Member></Member>
      <AutofixScroll :height="height" @bottom="onBottom">
        <div class="product-list">
          <div class="list-item" v-for="item in list" :key="item.id">
            <ProductCard
              type="2"
              :img="item.imageList?.[0] || ''"
              :title="item.name"
              :price="item.pointPrice"
              :id="item.id"
              :width="computedProductWidth()"
            ></ProductCard>
          </div>
        </div>
        <u-loadmore :status="loadStatus" loadmoreText="加载更多" nomoreText="暂无更多积分商品" />
      </AutofixScroll>
    </PageContainer>
    <TabBar></TabBar>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
import AutofixScroll from '@/components/AutofixScroll/index';
import PageContainer from "@/components/PageContainer/index.vue";
import ProductCard from '@/components/ProductCard/index.vue';
import TabBar from '@/components/TabBar/index.vue'
import Member from '@/components/Member/index.vue';
import { erpPointProductList } from '@/api'

const route = getCurrentPages();

const list = ref([])
const height = `100%`
const computedProductWidth = () => uni.upx2px(328)
const loadStatus = ref('loading')
const params = {
  pageNo: 1,
  pageSize: 10,
}
let total = 0

const getList = async () => {
  const res = await erpPointProductList(params)
  list.value = [...list.value, ...(res.records || [])]
  total = res.total
  if (list.value.length >= total) {
    loadStatus.value = 'nomore'
  }
}

const onShareAppMessage = () => {
  return {
    title: '融华荟礼服定制',
    path: route[route.length - 1].route,
  }
}

const onBottom = () => {
  if (list.value.length >= total) {
    loadStatus.value = 'nomore'
    return
  }
  params.pageNo += 1
  getList()
}

onMounted(() => {
  getList()
})
</script>

<style lang="less" scoped>
.product-page {
  .product-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(100vw - 360px);
    padding: 46px 16px 16px 16px;
    // margin: 0 auto;
  }
}
</style>
